<!DOCTYPE html>

<html>
	<head>
		<title>Points</title>
		<script type="text/javascript" src="../libs/three.js"></script>
		<script type="text/javascript" src="../libs/jquery-1.9.0.js"></script>
		<script type="text/javascript" src="../libs/stats.js"></script>
		<script type="text/javascript" src="../libs/dat.gui.js"></script>
		<script type="text/javascript" src="../libs/OrbitControls.js"></script>
		<script type="text/javascript" src="../libs/TrackballControls.js"></script>
		<style >
			body{
				/* set margin to 0 and overflow to hidden, to use the complete page */

				margin: 0;
				overflow: hidden;
			}
		</style>
	</head>
	<body>

		<!-- Div which will hold the Output -->
		<div id="WebGL-output">
		</div>

		<!-- Div which will show the stats -->
		<div id="Stats-output">
		</div>

		<!-- Javascript code that runs our Three.js examples -->
		<script type="text/javascript">

			var orbit;
			var trackball;
			var raycaster;
			var mouse;
			var INTERSECTED;

			//once everything is loaded, we run our Three.js stuff.
			$(function () { 
 				var stats = initStats();
 				
 				//here we'll put the Three.js stuff
 				var scene = new THREE.Scene();
 				
 				//add camera and renderer
 				var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
 				
 				var renderer = new THREE.WebGLRenderer();
 				renderer.setClearColor(0xEEEEEE, 1.0);
 				renderer.setSize(window.innerWidth, window.innerHeight);
 				renderer.shadowMapEnabled = true;

 				//add Light
 				var ambientLight = new THREE.AmbientLight(0x0c0c0c);
 				scene.add(ambientLight);

 				var spotLight = new THREE.SpotLight(0xffffff);
 				spotLight.castShadow = true;
 				spotLight.position.set(-40, 60, -10);
 				scene.add(spotLight);

 				//add plane
 				var planeGeo = new THREE.PlaneGeometry(60,40,1,1);
 				var planeMtr = new THREE.MeshLambertMaterial({color: 0xffffff});
 				var plane = new THREE.Mesh(planeGeo, planeMtr);
 				plane.rotation.x = -0.5 * Math.PI;
		        plane.position.x = 0;
		        plane.position.y = 0;
		        plane.position.z = 0;
		        plane.receiveShadow = true;
		        // scene.add(plane);


		        camera.position.x = 50;
		        camera.position.y = 50;
		        camera.position.z = 50;
		        camera.lookAt(scene.position);
		        document.getElementById("WebGL-output").appendChild(renderer.domElement);

		        // orbit = new THREE.OrbitControls(camera, renderer.domElement);
		        trackball = new THREE.TrackballControls(camera);
		        trackball.rotateSpeed = 0.01;
		        trackball.zoomSpeed = 1.0;
		        trackball.panSpeed = 1.0;
		        var clock = new THREE.Clock();

		        document.addEventListener( 'mousemove', onDocumentMouseMove, false );
				window.addEventListener( 'resize', onWindowResize, false );

		        // var lambert = new THREE.MeshLambertMaterial({color: 0xffaacc});

		        var controls = new function() {
		        	this.addPoints = function() {
						for(var i = 0; i < 100; i++){
				        	var sphereGeom = new THREE.SphereGeometry(1, 20, 20);
				        	var mtr = new THREE.MeshBasicMaterial();
				        	mtr.color = randomColor();
				        	mtr.transparent = true;
				        	mtr.opacity = 0.5
				        	var sphere = new THREE.Mesh(sphereGeom, mtr);
				        	//set circle position
				        	sphere.position.set(-50 + 100 * Math.random(), -50 + 100 * Math.random(), -50 + 100 * Math.random());

				        	scene.add(sphere);
				        	controls.number ++;
				        }
					}

					this.number = 0;
		        }

		        var gui = new dat.GUI();
		        gui.add(controls, "addPoints");
		        gui.add(controls, "number").listen();

		        raycaster = new THREE.Raycaster();
				mouse = new THREE.Vector2();


 				//add animation
 				render();
 				function render(){
 					stats.update();
 					// orbit.update();
 					var delta = clock.getDelta();
 					trackball.update(delta);

 					raycaster.setFromCamera(mouse, camera);

					var intersects = raycaster.intersectObjects(scene.children);

					if(intersects.length > 0){
						if(INTERSECTED != intersects[0].object) {
							if(INTERSECTED){
								INTERSECTED.scale.set(1, 1, 1);
							}
							INTERSECTED = intersects[0].object;
							INTERSECTED.scale.set(5, 5, 5);
						}
					}
					else{
						if(INTERSECTED){
							INTERSECTED.scale.set(1, 1, 1);
						}
						INTERSECTED = null;
					}

 					requestAnimationFrame(render);
 					renderer.render(scene, camera);
 				};

 				function onWindowResize() {

					camera.aspect = window.innerWidth / window.innerHeight;
					camera.updateProjectionMatrix();

					renderer.setSize( window.innerWidth, window.innerHeight );

				}

 				function onDocumentMouseMove( event ) {

					event.preventDefault();

					mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
					mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

				}

 				//get random color
 				function randomColor() {
 					return new THREE.Color(0xf00000 * Math.random() + 0x0f0000 *  Math.random() + 0x00f000 * Math.random() 
 						+ 0x000f00 * Math.random() + 0x0000f0 * Math.random() + 0x00000f * Math.random());
 				}

			});

			function initStats(){
				var stats = new Stats();
				stats.setMode(0);
				stats.domElement.style.position = 'absolute';
				stats.domElement.style.lefe = '0px';
				stats.domElement.style.top = '0px';
				$("#Stats-output").append(stats.domElement);
				return stats;
			}

			

		</script>

	</body>
</html>